<template>
  <div class="mask">
    <div class="box">
      <b @click="addGoods()">X</b>
      <el-input v-model="input" style="width: 400px;margin:10px" placeholder="商品名称" />
      <el-input v-model="input" style="width: 400px;margin:10px" placeholder="分类标签" />
      <el-input v-model="input" style="width: 400px;margin:10px" placeholder="规格" />
      <el-input v-model="input" style="width: 400px;margin:10px" placeholder="标准价格" />
      <el-input v-model="input" style="width: 400px;margin:10px" placeholder="优惠价格" />
      <el-input v-model="input" style="width: 400px;margin:10px" placeholder="条形码" />
      <el-input v-model="input" style="width: 400px;margin:10px" placeholder="备注" />
      <el-button type="primary" style="margin:13px;width: 400px" @click="addGoods()">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: ''
    }
  },
  methods: {
    addGoods() {
      this.$emit('addGoods')
    }
  }
}
</script>

<style lang="scss">
    .mask{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.5);
         z-index: 999;
    }
    .box{
        width: 500px;
        height: 450px;
        background: #fff;
        margin: 150px auto;
        text-align: center;
        border-radius: 10px;
        position: relative;
        b{
            position: absolute;
            right: 5px;
            top: 5px;
            cursor: pointer;
        }
        h4{
            height: 100px;
            line-height: 100px;
        }
    }

    .btn{
        width: 100%;
        display: flex;
        position: absolute;
        left: 170px;
        button{
            border-radius: 8px;
            border: none;
            width: 70px;
            height: 30px;
            margin-left: 10px;
             cursor: pointer;
        }
    }
</style>
